<template>
  <div>

    <myheader></myheader>

		<div id="carousel" class="carousel slide" data-ride="carousel">


			<!--<ul class="carousel-indicators">-->
				<!--<li data-target="#carousel" data-slide-to="0" class="active"></li>-->
				<!--<li data-target="#carousel" data-slide-to="1"></li>-->
				<!--<li data-target="#carousel" data-slide-to="2"></li>-->
			<!--</ul>-->

			<div class="carousel-inner">

        <!--幻灯片组件-->
        <Carousel :height="700" :datas="params" @click="click" pageTheme="circle">  <!-- datas绑定数据-->


        </Carousel>


				<!--Text only with background image-->
				<!--<div class="carousel-item active">-->
					<!--<div class="container slide-textonly">-->
						<!--<div>-->
							<!--<h1>York &amp; Smith</h1>-->
							<!--<p class="lead">Spring/Summer 2018 Collection</p>-->
							<!--<a href="#" class="btn btn-outline-secondary">View Collection</a>-->
						<!--</div>-->
					<!--</div>-->
				<!--</div>-->



			</div>
		</div>
		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>

		<section class="featured-block text-center">
			<div class="container">
				<div class="row justify-center">
					<div class="col-md-6 text-center">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
				</div>
			</div>
		</section>

		<section class="products text-center">

      <div class="container">
        排行：
        <table>
          <tr v-for="(i, index) in good_list">
            <td v-if="index<=2" style="color: #E11617 ">{{i.name}}</td>
            <td v-else>{{i.name}}</td>
          </tr>
        </table>
      </div>
      <br>

			<div class="container">
				<h3 class="mb-4">商品展示</h3>
				<div class="row">

          <!--遍历商品列表-->

					<div v-for="item in goodslist" class="col-sm-6 col-md-3 col-product">
						<figure>
              <a :href="'/item?id='+item.id"><img class="rounded-corners img-fluid" :src="
							'http://localhost:8000/static/upload/' + item.img + '' "	width="240" height="240"></a>
							<figcaption>
								<div class="thumb-overlay">
                  <a :href="'/item?id='+item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'/item?id='+item.id">{{ item.name }}</a></h4>
            <h4 v-if="type==0"></h4>
						<h4 v-else><a :href="'/editgood?id='+item.id">修改商品</a></h4>
						<p><span class="emphasis">{{ item.price }}</span></p>
					</div>
          <br>



          <br>
          <!--自主分页-->
          <div>
            <button @click="getdata(lastpage)" v-show="lastpage">上一页</button>
            <ul>
              <li v-for="index in all">
                <a @click="getdata(index)">{{ index }}</a>
              </li>
            </ul>

            <button @click="getdata(nextpage)" v-show="nextpage">下一页</button>

          </div>

          <!--分页逻辑 heyui分页-->
          <!--<div>-->
            <!--<Pagination v-model="pagination" @change="change"></Pagination>-->
          <!--</div>-->
          <br>

<div style="clear:both;"></div>
				</div>
			</div>
		</section>

		<div class="divider"></div>

		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>

		<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>


	</footer>

  </div>

</template>



<script>
import myheader from './myheader'
import Pagination from "heyui/lib";


export default {
  data () {
    return {
      type:'',
      msg: "这是一个变量",
      //排行榜
      good_list:[],
      // 商品列表
      goodslist:[],

      // 自主分页
      total:0, //商品总数
      cur:1,//当前页
      all:0,//总页数
      lastpage:0,//上一页
      nextpage:0,//下一页
      size:2, //每页显示数量

      // 分页器变量
      // pagination:{
      //   page:'',
      //   size:'',
      //   total:5,
      // },

      // 幻灯片数据
      params:[
        {
          title:'第一张',
          link:'http://127.0.0.1:8080',
          image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584617938282&di=511047369cd62bccdf9610e227dbf98f&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Fzhidao%2Fpic%2Fitem%2F3bf33a87e950352a448dc2045843fbf2b3118bca.jpg'
        },
        {
          title:'第二张',
          link:'http://www.baidu.com',
          image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584617996976&di=990e93840084a63d8db7c35be8819546&imgtype=0&src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ffd%2Ftg%2Fg2%2FM0B%2F55%2F3F%2FCghzgVUg0L2AVbOTABFEGQdiWbI532.jpg'
        },
        {
          title:'第二张',
          link:'http://www.baidu.com',
          image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584618031815&di=3e73b1b7a5ae90ed230bf334358ff6fe&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F13%2F20160713005958_EyRkj.jpeg'
        },
      ]
    }
  },
  //注册组件标签
  components:{
    Pagination,
    'myheader':myheader
  },
  mounted:function(){
    let type = localStorage.getItem('type');
    if(type==0){
      this.type = 0
    }else {
      this.type = 1
    }

    //调用排行榜接口
    this.goods_rank();

    //调用自主分页接口
    this.getdata(1);


    // 发送请求
    //         this.axios.get(
    //           'http://127.0.0.1:8000/goodslist/',{params:{page:this.page,size:this.size}}).then(res=>{
    //             console.log(res);
    //             this.goodslist = res.data.data;
    //         });

    //幻灯片请求
    this.axios({
      url:'http://127.0.0.1:8000/picslist/',
      method:'GET'
    }).then(res=>{
      var mylist = res.data;
      var datalist = [];
      //遍历
      for(let i=0,l=mylist.length;i<l;i++){
        datalist.push({title:mylist[i]['title'],link:mylist[i]['link'],image:mylist[i]['img']});
      }
      this.params = datalist
    })


},
  methods:{
    //获取商品排行榜
    goods_rank(){
      this.axios.get('http://127.0.0.1:8000/goodrank/').then(res=>{
        this.good_list = res.data
      })

    },

    //自主分页接口
    getdata:function(page){ // page页码
      // 发送请求
        this.axios.get(
          'http://127.0.0.1:8000/goodslist/',{params:{page:page,size:this.size}}).then(res=>{
            console.log(res);
            this.goodslist = res.data.data;

            //判断上一页
            if(page === 1){
              this.lastpage = 0
            }else {
              this.lastpage = page - 1;
            }

            //计算总页数
            this.all = Math.ceil(res.data.total / this.size);

            //判断下一页
            if(page === this.all){
              this.nextpage = 0;
            }else {
              this.nextpage = page + 1;
            }
        });
    },

    // 分页器事件
    // change:function(){
    //     // 发送请求
    //     this.axios.get(
    //       'http://127.0.0.1:8000/goodslist/',{params:{page:this.pagination.page,size:this.pagination.size}}).then(res=>{
    //         console.log(res);
    //         this.goodslist = res.data.data;
    //     });
    //
    // },

    // 幻灯片点击事件
    click:function (index, data) {
      console.log(data);
      //点击后跳转具体页面
      window.location.href = data.link;

    }

  }
}


</script>

<style>



</style>
